<template>
  <div v-if="visible" class="stickyOperationDialog" :class="{ multiple: isMultiple }" :style="{...style}">
    <slot />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const visible = defineModel<Boolean>('visible', { default: false });
const isMultiple = defineModel<Boolean>('isMultiple', { default: false }); // 是否同时显示多个对话框
const style = defineModel<Object>('style', { default: () => ({}) }); // 接收 style prop
const open = () => {
  visible.value = true;
};
const close = () => {
  visible.value = false;
};
const dialogRef = ref<HTMLElement | null>(null);
defineExpose({
  open,
  close,
});
</script>

<style lang="less" scoped>
.stickyOperationDialog {
  width: max-content;
  margin: 30px auto 10px;
  padding: 10px 20px;
  background-color: rgb(238 238 238 / 60%);
  border-radius: 32px;
  backdrop-filter: blur(10px);
  box-shadow: 0 0 10px rgb(0 0 0 / 10%);
  position: sticky;
  bottom: 60px;
  z-index: 99;
  &.multiple {
    position: fixed; // 多个对话框时使用 fixed 定位
    left: 50%; // 默认居中
    // transform: translateX(-50%); // 水平居中
  }
}
</style>
